<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>流程图设计器</title>
	<!--[if lt IE 9]>
	<?import namespace="v" implementation="#default#VML" ?>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="#(res_path)/hplus/gooflow/codebase/fonts/iconflow.css"/>
	<link rel="stylesheet" type="text/css" href="#(res_path)/hplus/gooflow/codebase/GooFlow.css"/>
	<link rel="stylesheet" type="text/css" href="#(res_path)/hplus/css/bootstrap.min.css"/>
	
	<script type="text/javascript" src="#(res_path)/hplus/js/jquery.min.js"></script>
	<script type="text/javascript" src="#(res_path)/hplus/gooflow/codebase/GooFunc.js"></script>
	<script type="text/javascript" src="#(res_path)/hplus/gooflow/plugin/json2.js"></script>
	<script type="text/javascript" src="#(res_path)/hplus/gooflow/plugin/printThis.js"></script>
	<script type="text/javascript" src="#(res_path)/hplus/gooflow/codebase/GooFlow.js"></script>
	<script type="text/javascript" src="#(res_path)/hplus/gooflow/codebase/GooFlow.color.js"></script>
	<script type="text/javascript" src="#(res_path)/hplus/gooflow/codebase/GooFlow.export.js"></script>
 	<script type="text/javascript" src="#(res_path)/hplus/js/plugins/layer/layer.js"></script>
</head>
<body style="padding: 5px">
	<div id="flow"></div>
	<div id="editNode" style="display:none;position: absolute;right: 5px;top:5px;width: 300px;background-color: white;padding: 15px;border: solid 1px #CCC;">
		<form method="post" class="form-horizontal required-validate" novalidate="novalidate" onsubmit="return saveNode(this)">
			<div class="form-group">
				<label class="col-xs-4 control-label" style="font-size: 12px">ID：</label>
				<div class="col-xs-8">
					<input type="text" class="form-control" readonly="readonly" name="node_id"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-xs-4 control-label" style="font-size: 12px">节点：</label>
				<div class="col-xs-8">
					<input type="text" class="form-control" readonly="readonly" name="node_name"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-xs-4 control-label" style="font-size: 12px">会员组：</label>
				<div class="col-xs-8">
					<select name="group_id" class="form-control" style="font-size: 12px">
						<option value="">请选择</option>
						#(data("AUTH_GROUP","option",""))
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-xs-4 control-label" style="font-size: 12px">确认人：</label>
				<div class="col-xs-8">
					<select name="confirm" class="form-control" style="font-size: 12px">
						<option value="">无需确认</option>
						<option value="A">创建人</option>
						<option value="B">下级</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-xs-8 col-xs-offset-4">
					<button type="submit" class="btn btn-primary">保存</button>
				</div>
			</div>
		</form>
	</div>
	<form id="flowForm" onsubmit="return saveFlow(this)">
		<input type="hidden" name="flowInfo.id" value="#(flowInfo.id)"/>
		<input type="hidden" name="flowInfo.code" value="#(flowInfo.code)"/>
		<input type="hidden" name="flowInfo.content" value="#(flowInfo.content)"/>
	</form>
	<script type="text/javascript">
	var property={
			width:1000,height:600,
			toolBtns:["start round","end round","task","node","chat","state","plug","join","fork","complex mix"],
			haveHead:true,headLabel:true,
			headBtns:["save","undo","redo"],//如果haveHead=true，则定义HEAD区的按钮
			haveTool:true,haveDashed:true,haveGroup:true,useOperStack:true
		};
		var remark={
			cursor:"选择指针",direct:"结点连线",dashed:"关联虚线",start:"入口结点","end":"结束结点","task":"任务结点",
			node:"自动结点",chat:"决策结点",state:"状态结点",plug:"附加插件",fork:"分支结点","join":"联合结点",
			"complex":"复合结点",group:"组织划分框编辑开关"
		};
		var flow;
		$(document).ready(function(){
			flow=$.createGooFlow($("#flow"),property);
			flow.setNodeRemarks(remark);
			flow.setTitle("流程设计器");
			flow.loadData(#(flowInfo.content??"{}"));
			flow.onBtnSaveClick = function(){
				$("#flowForm").find("input[name='flowInfo.content']").val(JSON.stringify(flow.exportData()));
				$("#flowForm").submit();
			};
			flow.onItemFocus = function(id,type){
				if(type=="node"){
					var node = flow.getItemInfo(id,type);
					if(node.group_id){
						$("#editNode").find("select[name='group_id']").val(node.group_id);
					}else {
						$("#editNode").find("select[name='group_id']").val("");
					}
					if(node.confirm){
						$("#editNode").find("select[name='confirm']").val(node.confirm);
					}else {
						$("#editNode").find("select[name='confirm']").val("");
					}
					$("#editNode").find("input[name='node_name']").val(node.name);
					$("#editNode").find("input[name='node_id']").val(id);
					$("#editNode").show();
				}
				return true;
			}
			
		});
		function saveFlow(obj){
			$.ajax({
				type:"POST",
				url:"saveDesignFlow",
				data:$(obj).serialize(),
				dataType:"json",
				success:function(data){
					layer.msg(data.message);
				}
			});
			return false;
		}
		
		function saveNode(obj){
			var group_id = $(obj).find("select[name='group_id']").val();
			var node_id = $(obj).find("input[name='node_id']").val();
			var confirm = $(obj).find("select[name='confirm']").val();
			if(!flow.$nodeData[node_id]){
				 layer.msg("没有找到节点！");
				 return false;
			}
			flow.$nodeData[node_id].group_id=group_id;
			flow.$nodeData[node_id].confirm=confirm;
			layer.msg("保存成功！");
			return false;
		}
	</script>
</body>
</html>
